import 'package:flutter/material.dart';
import 'package:login/pages/find.dart';
import '../pages/friends.dart';
import '../pages/nearby.dart';
import '../pages/find.dart';


class TabsPage extends StatefulWidget {
  TabsPage({Key key}) : super(key: key);

  @override
  _TabsPageState createState() => _TabsPageState();
}

class _TabsPageState extends State<TabsPage> {
  //定义一个当前的索引
  int _currentIndex = 0;

  //页面集合，用来切换时，要当前的索引返回同一个具体页面
  List _pageList = [ FriendsPage(),NearbyPage(), FindPage() ];
  //构建底部tab的item
  BottomNavigationBarItem _buildBottomNavigationBarItem(
      double index, IconData icon, String title) {
    return BottomNavigationBarItem(
      icon: Icon(
        icon,
        //选中时为黄色，不选中为白色 三元表达式
        color: this._currentIndex == index ? Colors.yellow[200]: Colors.purple,
      ),
      title: Text(
        title,
        style: TextStyle(
          color: this._currentIndex == index ? Colors.yellow[200] : Colors.purple,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //页面容器
      body: this._pageList[_currentIndex],

      //底部tab
      bottomNavigationBar: BottomNavigationBar(
          //设置tab的背景色
          backgroundColor: Colors.blue[200],
          //设置当前选中的索引
          currentIndex: this._currentIndex,

          //当点击底部导航ICON标志切换
          onTap: (index) {
            setState(() {  //页面渲染，数据模型与视图绑定
            //索引更新
              this._currentIndex = index; 
            });
          },
          items: [
            _buildBottomNavigationBarItem(0, Icons.home, '广场'),
            _buildBottomNavigationBarItem(1, Icons.near_me, '靠近'),
            _buildBottomNavigationBarItem(2, Icons.people, '发现'),
          ]),
    );
  }
}
